<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>

<!DOCTYPE html>
<html lang="zh">

<head>
<meta charset="utf-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>曲库管理 - 咖啡音乐CoffeeMusic后台管理系统</title>
<link rel="icon" href="favicon.ico" type="image/ico">
<meta name="keywords" content="LightYear,光年,后台模板,后台管理系统,光年HTML模板">
<meta name="description"
	content="LightYear是一个基于Bootstrap v3.3.7的后台管理系统的HTML模板。">
<meta name="author" content="yinqi">
<link href="css/bootstrap.min.css" rel="stylesheet">

<link href="css/materialdesignicons.min.css" rel="stylesheet">
<link href="css/style.min.css" rel="stylesheet">

<!--
        	作者：zhujz
        	时间：2019-03-28
        	描述：导入datatables样式表
        -->
<link
	href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap.min.css"
	rel="stylesheet">


</head>

<body>
	<div class="lyear-layout-web">
		<div class="lyear-layout-container">
			<!--左侧导航-->
			<aside class="lyear-layout-sidebar">

				<!-- logo -->
				<div id="logo" class="sidebar-header">
					<a href="index.jsp"><img src="images/logo-sidebar.png"
						title="CoffeeMusic" alt="CoffeeMusic" /></a>
				</div>
				<div class="lyear-layout-sidebar-scroll">

					<nav class="sidebar-main">
						<ul class="nav nav-drawer">
							<li class="nav-item"><a href="index.jsp"><i
									class="mdi mdi-home"></i> 后台首页</a></li>
							<li class="nav-item nav-item-has-subnav"><a
								href="javascript:void(0)"><i class="mdi mdi-account-circle"></i>
									用户管理</a>
								<ul class="nav nav-subnav">
									<li><a href="userManagement.jsp"><i
											class="mdi mdi-account"></i> 用户</a></li>
								</ul></li>
							<li class="nav-item nav-item-has-subnav   active open"><a
								href="javascript:void(0)"><i class="mdi mdi-music-circle"></i>
									曲库管理</a>
								<ul class="nav nav-subnav">
									<li><a href="musicManagement.jsp"><i
											class="mdi mdi-music-note"></i> 曲库</a></li>
								</ul></li>


							<li class="nav-item nav-item-has-subnav"><a
								href="javascript:void(0)"><i class="mdi mdi-comment-account"></i>
									评论管理</a>
								<ul class="nav nav-subnav">
									<li><a href="commentsManagement.jsp"><i
											class="mdi mdi-comment-text"></i> 评论</a></li>
								</ul></li>

						</ul>
					</nav>

					<div class="sidebar-footer">
						<p class="copyright">
							Copyright &copy; 2019. <a target="_blank"
								href="http://lyear.itshubao.com">CoffeeMusic</a> All rights
							reserved.
						</p>
					</div>
				</div>

			</aside>
			<!--End 左侧导航-->

			<!--头部信息-->
			<header class="lyear-layout-header">

				<nav class="navbar navbar-default">
					<div class="topbar">

						<div class="topbar-left">
							<div class="lyear-aside-toggler">
								<span class="lyear-toggler-bar"></span> <span
									class="lyear-toggler-bar"></span> <span
									class="lyear-toggler-bar"></span>
							</div>
							<span class="navbar-page-title"> CoffeeMusic - 曲库管理 </span>
						</div>

						<ul class="topbar-right">
							<li class="dropdown dropdown-profile"><a
								href="javascript:void(0)" data-toggle="dropdown"> <img
									class="img-avatar img-avatar-48 m-r-10"
									src="images/users/avatar.jpg" alt="笔下光年" /> <span>
										${sessionScope.user.uname}<span class="caret"></span>
								</span>
							</a>
								<ul class="dropdown-menu dropdown-menu-right">
									<li><a href="lyear_pages_profile.html"><i
											class="mdi mdi-account"></i> 个人信息</a></li>
									<li><a href="lyear_pages_edit_pwd.html"><i
											class="mdi mdi-lock-outline"></i> 修改密码</a></li>
									<li><a href="javascript:void(0)"><i
											class="mdi mdi-delete"></i> 清空缓存</a></li>
									<li class="divider"></li>
									<li><a href="../login?op=quit"><i
											class="mdi mdi-logout-variant"></i> 退出登录</a></li>
								</ul></li>
						</ul>

					</div>
				</nav>

			</header>
			<!--End 头部信息-->

			<!--页面主要内容-->
			<main class="lyear-layout-content">

			<div class="container-fluid">

				<div class="row">
					<div class="col-lg-12">
						<div class="card">
							<div class="card-toolbar clearfix">

								<div class="toolbar-btn-action">
									<a class="btn btn-primary m-r-5" href="#!" data-toggle="modal"
										data-target="#newUser" data-whatever="@doAddNewUser"><i
										class="mdi mdi-plus"></i> 新增</a>
								</div>
							</div>
							<div class="card-body">

								<div class="table-responsive">
									<table class="table table-bordered" id="example">
										<thead>
											<tr>
												<th>歌曲ID</th>
												<th>类型ID</th>
												<th>歌曲名</th>
												<th>点赞数</th>
												<th>url</th>
												<th>收藏数</th>
												<th>下载数</th>
												<th>操作</th>
											</tr>
										</thead>

										<tfoot>
											<tr>
												<th>歌曲ID</th>
												<th>类型ID</th>
												<th>歌曲名</th>
												<th>点赞数</th>
												<th>url</th>
												<th>收藏数</th>
												<th>下载数</th>
												<th>操作</th>
											</tr>
										</tfoot>
									</table>
								</div>

							</div>
						</div>
					</div>

				</div>

			</div>

			</main>
			<!--End 页面主要内容-->
		</div>
	</div>

	<div class="modal fade" id="newUser" tabindex="-1" role="dialog"
		aria-labelledby="newUser">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title" id="exampleModalLabel">新增歌曲</h4>
				</div>
				<div class="modal-body">
					<form>
						<div class="form-group">
							<label for="music-name" class="control-label">歌曲名：</label> <input
								type="text" class="form-control" id="mname"
								placeholder="请输入歌曲名...">
						</div>
						</br>
						<div class="form-group">
							<label for="music-url" class="control-label">歌曲URL：</label> <input
								type="text" class="form-control" id="murl"
								placeholder="请输入歌曲URL...">
						</div>
						</br>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
					<button type="button" class="btn btn-primary" id="btn_add">确认添加</button>
				</div>
			</div>
		</div>
	</div>



	<!-- 歌曲信息更改弹出窗口 -->
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title" id="myModalLabel">更改歌曲信息</h4>
				</div>
				<div class="modal-body">
					<form>
						<input type="hidden" class="form-control" id="update_mid" value="">
						<div class="form-group">
							<label for="music-name" class="control-label">歌曲名：</label> <input
								type="text" class="form-control" id="update_mname"
								placeholder="请输入歌曲名...">
						</div>
						</br>
						<div class="form-group">
							<label for="music-url" class="control-label">歌曲URL：</label> <input
								type="text" class="form-control" id="update_murl"
								placeholder="请输入歌曲URL...">
						</div>
						</br>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button type="button" class="btn btn-primary" id="make_update">点击保存</button>
				</div>
			</div>
		</div>
	</div>


	<script type="text/javascript"
		src="https://code.jquery.com/jquery-3.3.1.js"></script>
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/bootstrap.min.js"></script>
	<script type="text/javascript" src="js/perfect-scrollbar.min.js"></script>
	<script type="text/javascript" src="js/main.min.js"></script>
	<script type="text/javascript"
		src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
	<script type="text/javascript"
		src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap.min.js"></script>
	<script type="text/javascript">
		

		<!--点击添加时显示添加界面-->
		$('#exampleModal').on('show.bs.modal', function(event) {
			var button = $(event.relatedTarget)
			var recipient = button.data('whatever')
			var modal = $(this)
			//				modal.find('.modal-title').text('发送新消息给 ' + recipient)
			//				modal.find('.modal-body input').val(recipient)
		});
		
		$(document).on('click','button[class="btn btn-info"]',function(){
			var data = $('#example').DataTable();
			var mid = data.row($(this).parents('tr')).data().mid;
			var mname = data.row($(this).parents('tr')).data().mname;
			var murl = data.row($(this).parents('tr')).data().url;
			$("#update_mid").val(mid);
			$("#update_mname").val(mname);
			$("#update_murl").val(murl);
			
		});

		<!--Datatables分页展示歌曲-->
		$(document).ready(function() {
			$('#example').DataTable(
				{ajax : "../ms.do?ac=query",columns : [
					{data : "mid"}, 
					{data:"tid",},
					{data : "mname"}, 
					{data : "mlike"}, 
					//{data : "url"}, 
					{
						data:function(data){
							return "<p style='width:150px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis'>"+data.url+"</p>"
						}
					},
					{data : "collect"}, 
					{data : "download"},
					{"defaultContent" : "<button class='btn btn-danger'><i class='mdi mdi-window-close'></i>删除</button>&nbsp;&nbsp;<button class='btn btn-info' data-toggle='modal' data-target='#myModal'><i class='mdi mdi-window-close'></i>更新</button>"
				}]
			});
			
		});
		

			

		
		<!--添加歌曲“确认添加”按钮事件，点击后提交表单的数据-->
		$("#btn_add").on('click',function(){
			var mname = $("#mname").val();
			var murl = $("#murl").val();
			if(mname!=""&&murl!=""){
				$.ajax({
					"url":"../ms.do?ac=add",
					"data":{
						"mname":mname,
						"murl":murl
					},
					"success":function(data){
						if(data.msg=="添加成功！"){
							alert(data.msg);
							location.reload();
						}else{
							alert(data.msg);
						}
					}
				});
			}
		});
		
		
		<!--添加歌曲“点击保存”按钮事件，点击后提交表单的数据-->
		$("#make_update").on('click',function(){
			var newmid = $("#update_mid").val();
			var newmname = $("#update_mname").val();
			var newmurl = $("#update_murl").val();
			console.log(newmid+","+newmname+","+newmurl);
			$.ajax({
				"url":"../ms.do?ac=update",
				"data":{
					"mid":newmid,
					"newUrl":newmurl,
					"newMname":newmname
				},
				"success":function(data){
					if(data.msg=="更新成功！"){
						alert(data.msg);
						location.reload();
					}else{
						alert(data.msg);
					}
				}		
			});
		});
		
		<!--删除歌曲-->
		$(document).on('click','button[class="btn btn-danger"]',function(){
			var data = $('#example').DataTable();
			var id = data.row($(this).parents('tr')).data().mid;
			$.ajax({
				"url" : "../ms.do?ac=del",
				"data" : {
				"mid" : id
				},
				"success" : function(data) {
					if(data.msg=="删除成功！"){
						alert(data.msg);
						$('#example').DataTable().ajax.reload(null,false);
					}else{
						alert("删除失败！");
					}
				}
			});
		});
		
	</script>

</body>

</html>